<template>
    <!-- #ifdef APP-PLUS || MP-WEIXIN -->
    <WXAPPpage :nowKind="nowKind" @open="open"></WXAPPpage>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <H5page :nowKind="nowKind" @open="open"></H5page>
    <!-- #endif -->
    <!-- 规格 -->
    <Specification :showStatus="showStatus" @close="close"></Specification>
    <!-- 已选菜单 -->
    <Food :foodStatus="foodStatus" @closeFood="closeFood"></Food>
    <!-- 计费 -->
    <Pay :foodBottom="foodBottom" :foodStatus="H5status" @openFood="openFood"></Pay>
</template>

<script setup lang="ts">
import { Ref } from 'vue'
import WXAPPpage from '@/component/home/WXAPPpage.vue'
import H5page from '@/component/home/H5page.vue'
import Pay from '@/component/pay.vue'
import Specification from '@/component/specification.vue'
import Food from '@/component/food.vue'
let nowKind: Ref = ref<string>('')
setTimeout((): void => {
    nowKind.value = '热销美食'
}, 1000)
let num: number = 0
let foodBottom: Ref = ref<number>(num)
onMounted((): void => {
    uni.getSystemInfo({
        complete(res): void {
            foodBottom.value = res.windowBottom + 20
        }
    })
})
const showStatus: Ref = ref<boolean>(false)
const foodStatus: Ref = ref<boolean>(false)
const H5status: Ref = ref<boolean>(false) // H5的底部高度不算tabbar，所以需要兼容处理
const open = (e: boolean) => {
    showStatus.value = e
}
const openFood = (e: boolean) => {
    foodStatus.value = e
    // #ifdef H5
    H5status.value = e
    // #endif
}
const close = (e: boolean) => {
    showStatus.value = e
    uni.showTabBar()
}
const closeFood = (e: boolean) => {
    foodStatus.value = e
    // #ifdef H5
    H5status.value = e
    // #endif
    uni.showTabBar()
}
</script>

<style scoped>

</style>